<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <link rel="stylesheet" href="../../css/api.css">
      <link rel="stylesheet" href="../../css/base_bai/base.css">
      <title>我的订单</title>

      <style>
      img{    display: block;}
        html, body{font-size: 100%;background: #F5F5F5}
      .van-nav-bar .van-icon{color:black;}
      .van-tabs__wrap--scrollable .van-tab{    flex: 0 0 20%;}

      .order_info{padding:0.5rem;background: white;margin: 0.5rem 0}
      .order_title{display: flex;align-items: center;padding: 1rem 0 0.5rem; }
      .order_title>div:nth-child(1){display: flex;align-items: center;font-size: 0.7rem; }
      .order_title>div:nth-child(2){flex: 3;text-align: right;font-size: 0.7rem;color:#999999}
      .order_title>div img{width: 2rem;padding-right: .5rem}

      .order_cont{ border-top: 1px solid #f7f7f7;display:flex;padding: 1rem 0 0.5rem;}
      .order_cont *{font-size: .9rem}
      .order_cont>[cont]{position: relative;}
      .order_cont>[cont]>div:nth-child(1){height:2.5rem;   display: -webkit-box;-webkit-box-orient: vertical;  -webkit-line-clamp: 2;  overflow: hidden;}
      .order_cont>[cont]>div:nth-child(2){position:absolute;    bottom: 0;}
      .order_cont>[shop_img]{margin-right:.5rem}
      .order_cont [cont_font]>span{color:#979899;  padding-right: 1rem;}

      .but_sty{text-align: right;    margin-top: .5rem;}
      [cancel_but]{    border-radius: 2rem;  height: 2rem;  line-height: 1.8rem;margin-right: 1rem}
      [cancel_but]>span{color:#979899}
      [sub_but]{    border: 1px solid #FF9900;  border-radius: 2rem;  height: 2rem;line-height: 1.8rem;}
      [sub_but]>span{color:#FF9900}
      </style>
  </head>
  <body>
  <div id="app" v-cloak>

    <div>
        <van-nav-bar class="m-header" title="我的订单" left-arrow @click-left="  closeWin()" />
    </div>


  <div>
    <van-tabs v-model="active"  swipe-threshold="5" swipeable color="#FF9900" title-active-color="#FF9900">
    <van-tab title="全部">
        <div>
          <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >

              <div class="order_info"  v-for="item in list" :key="item"  :title="item" >
                  <div class="order_title">
                      <div><img src="../../image/center_order_list_1.png"  style="width:2rem"/>商户名称</div>
                      <div>订单号：546566565665645565</div>
                  </div>
                  <div class="order_cont">
                      <div  shop_img><img src="../../image/center_order_list_2.png"  style="width:6.25rem"/></div>
                      <div  cont >
                        <div>北欧小户型布艺沙发客厅双人三人简约风格沙发日式小沙发组合ins质</div>
                        <div>
                          <div style="color:#979899">x1</div>
                          <div cont_font>
                            <span>¥ 679.9</span>共1件商品 合计:<span style="font-weight: 600;color:black ">¥ 679.9</span>
                          </div>
                      </div>
                      </div>
                  </div>
                  <div class="but_sty">
                    <van-button  cancel_but>取消订单</van-button><van-button sub_but>立即付款</van-button>
                  </div>
              </div>
            </van-list>
        </div>
    </van-tab>
    <van-tab title="待付款">
      <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >

          <div class="order_info"  v-for="item in list" :key="item"  :title="item" >
              <div class="order_title">
                  <div><img src="../../image/center_order_list_1.png"  style="width:2rem"/>商户名称</div>
                  <div>订单号：546566565665645565</div>
              </div>
              <div class="order_cont">
                  <div  shop_img><img src="../../image/center_order_list_2.png"  style="width:6.25rem"/></div>
                  <div  cont >
                    <div>北欧小户型布艺沙发客厅双人三人简约风格沙发日式小沙发组合ins质</div>
                    <div>
                      <div style="color:#979899">x1</div>
                      <div cont_font>
                        <span>¥ 679.9</span>共1件商品 合计:<span style="font-weight: 600;color:black ">¥ 679.9</span>
                      </div>
                  </div>
                  </div>
              </div>
              <div class="but_sty">
                <van-button  cancel_but>取消订单</van-button><van-button sub_but>立即付款</van-button>
              </div>
          </div>
        </van-list>
    </van-tab>
    <van-tab title="待发货">
      <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >

          <div class="order_info"  v-for="item in list" :key="item"  :title="item" >
              <div class="order_title">
                  <div><img src="../../image/center_order_list_1.png"  style="width:2rem"/>商户名称</div>
                  <div>订单号：546566565665645565</div>
              </div>
              <div class="order_cont">
                  <div  shop_img><img src="../../image/center_order_list_2.png"  style="width:6.25rem"/></div>
                  <div  cont >
                    <div>北欧小户型布艺沙发客厅双人三人简约风格沙发日式小沙发组合ins质</div>
                    <div>
                      <div style="color:#979899">x1</div>
                      <div cont_font>
                        <span>¥ 679.9</span>共1件商品 合计:<span style="font-weight: 600;color:black ">¥ 679.9</span>
                      </div>
                  </div>
                  </div>
              </div>
              <div class="but_sty">
                <van-button  cancel_but>提醒发货</van-button>
                <!-- <van-button sub_but>立即付款</van-button> -->
              </div>
          </div>
        </van-list>

    </van-tab>
    <van-tab title="待收货">
      <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >

          <div class="order_info"  v-for="item in list" :key="item"  :title="item" >
              <div class="order_title">
                  <div><img src="../../image/center_order_list_1.png"  style="width:2rem"/>商户名称</div>
                  <div>订单号：546566565665645565</div>
              </div>
              <div class="order_cont">
                  <div  shop_img><img src="../../image/center_order_list_2.png"  style="width:6.25rem"/></div>
                  <div  cont >
                    <div>北欧小户型布艺沙发客厅双人三人简约风格沙发日式小沙发组合ins质</div>
                    <div>
                      <div style="color:#979899">x1</div>
                      <div cont_font>
                        <span>¥ 679.9</span>共1件商品 合计:<span style="font-weight: 600;color:black ">¥ 679.9</span>
                      </div>
                  </div>
                  </div>
              </div>
              <div class="but_sty">
                <van-button  cancel_but @click="openWin('select_logistics','select_logistics',{})">查看物流</van-button><van-button sub_but>确认收货</van-button>
              </div>
          </div>
        </van-list>
    </van-tab>
    <van-tab title="待评价">
      <van-list   v-model="loading"   :finished="finished"  finished-text="没有更多了"  @load="onLoad"  >

          <div class="order_info"  v-for="item in list" :key="item"  :title="item" >
              <div class="order_title">
                  <div><img src="../../image/center_order_list_1.png"  style="width:2rem"/>商户名称</div>
                  <div>订单号：546566565665645565</div>
              </div>
              <div class="order_cont">
                  <div  shop_img><img src="../../image/center_order_list_2.png"  style="width:6.25rem"/></div>
                  <div  cont >
                    <div>北欧小户型布艺沙发客厅双人三人简约风格沙发日式小沙发组合ins质</div>
                    <div>
                      <div style="color:#979899">x1</div>
                      <div cont_font>
                        <span>¥ 679.9</span>共1件商品 合计:<span style="font-weight: 600;color:black ">¥ 679.9</span>
                      </div>
                  </div>
                  </div>
              </div>
              <div class="but_sty">
                <van-button sub_but @click="openWin('comment','comment',{})">立即评价</van-button>
              </div>
          </div>
        </van-list>

    </van-tab>
  </van-tabs>
  </div>



  </div>
  </body>
  <script src="../../script/api.js"></script>
  <script src="../../script/base_bai/vue.js"></script>
  <script src="../../script/base_bai/vant.js"></script>
  <script src="../../script/base_bai/base.js"></script>
  <script src="../../script/base_bai/temp.js"></script>
  <script type="text/javascript">
      apiready = function(){
          headerH = $api.fixStatusBar($api.byId('app'));
        Vue.prototype.$ac = api;
        initVue()
      };
      if (BrowserType() == 'pc') {
          initVue()
      }
      function initVue() {
          new Vue({
              el: '#app',
            // data: temp.center.order_list,
            data:{
               active: 0,
              list: [],
              loading: false,
              finished: false
            },
            methods: {
              onLoad() {

                // 异步更新数据
                setTimeout(() => {
                  for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1);
                  }
                  // 加载状态结束
                  this.loading = false;

                  // 数据全部加载完成
                  if (this.list.length >= 40) {
                    this.finished = true;
                  }
                }, 500);
              }
            }

          })
      }
  </script>
  </html>
